<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通过HTML及CSS模拟报纸排版</title>
    <link rel="stylesheet" href="css/weiwei006.css">
</head>
<body>
    <div class="mainBg">
        <div class="content">
            <p>2018.4</p>
            <div id="header-site">
                <p>ife.baidu.com</p>
            </div>
            <div id="header-line">
            </div>
            <div id="chapter01">
                <img src="./image/task_1_6_1_03.png">
                <div id="chapter01-right">
                    <div id="chapter01-line"></div>
                    <p class="chapter01-text01"><span>A</span>bout</p>
                    <p class="chapter01-text01"><span>T</span>ECHNOLOGO</p>
                    <p class="chapter01-text02">About technologo about technologo about technologo</p>
                    <p class="chapter01-text03">700</p>
                </div>
            </div>
            <div id="chapter02">
                <p class="chapter02-big"><span>What</span><br>端前端端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                <p class="chapter02-big"><span>When</span><br>端前端端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                <p class="chapter02-big"><span>How</span><br>端前端端前端端前端前端前端前端前端前端前端前端前端前端
                    <br>What------- 40%
                    <br>What------- 40%
                    <br>What------- 40%
                </p>
            </div>
            <div id="chapter03">
                <div id="chapter03-left">
                        <p><span>THE</span>technologe of front</p>
                        <p>前端技术领域</p>
                        <div id="chapter03-line"></div>
                        <span>前</span>端前端端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端端前端端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端端前端端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        <img id="chapter03-left-img" src="./image/task_1_6_1_11.png">
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    </div>
                <div id="chapter03-right">
                    <img id="chapter03-right-img" src="./image/task_1_6_1_07.png">
                    </div>
            </div>
        </div>
    </div>
</body>

</html>